Ektron CMS400.Net Reference

>>Using Widgets > Customizing Widgets > Working with JavaScript and Cascading Style Sheets

Working with JavaScript and Cascading Style Sheets

You can use JavaScript or a cascading style sheet to add custom functionality or styling to a widget. To do this, place the JavaScript or cascading style sheet (css) instructions in an external file, then register it in the codebehind file.

Here is an example of including a JavaScript file.

void EditEvent(string settings)
JS.RegisterJSInclude(this, _api.SitePath + "widgets/contentblock/jquery.cluetip.js", "EktronJqueryCluetipJS");

Here is an example of including a .css file.

Css.RegisterCss(this, _api.SitePath + "widgets/contentblock/CBStyle.css","CBWidgetCSS");

You must register JavaScript and .css files in an external file, as shown above. If you do not, the OnSubmit event places HTML in the TextArea field in encoded brackets (< >) and generates a dangerous script error.

The JS.RegisterJSInclude and Css.RegisterCss functions take three arguments.

Argument

Description

Example (from above code)

1

A reference to the control that needs the script or style sheet on the page. Typically, ‘this’ or ‘me’.

this

2

The URL of the script or style sheet being included.

Ektron recommends prefixing the URL with a site path, so it can be used with URLs like http://localhost/ektrontech and http://ektrontech.

_api.SitePath + "widgets/contentblock/jquery.cluetip.js"

_api.SitePath + "widgets/contentblock/CBStyle.css"

3

A unique key.

Only include the script specified by a key once.

Your organization should develop a standard way to define JavaScript and .css keys.

"EktronJqueryCluetipJS"

“CBWidgetCSS”

Widgets use an update panel for partial postbacks. As a result, the ASP.NET tree view and file upload controls do not work with widgets. Ektron CMS400.NET has workarounds for these functions. For an example of a tree view, see the content block widget (site root/widgets/contentblock.ascx). For an Ajax file uploader, see the flash widget (site root/widgets/flash.ascx).


Visit the Ektron Dev Center at http://dev.ektron.com 1-866 - 4 - EKTRON

Ektron CMS400.NET Reference Version 8.02 SP1 Rev 1

Ektron Documentation,© 2011 Ektron, Inc.